<template>
    <div class="howtoDistribut">
        <div class="title">我如何使用平台开始分销产品？</div>
		<div class="content">
			<div class="flex">
				<div class="bold big">完整的分销步骤：</div>
			</div>
			<div class="ff flex">
				<div class="f1"><img :src="howtoDistribut1"></div>
				<div class="f2">
					<div class="title3">1、添加分销商</div>
					<div>通知合作伙伴添加我为供货商</div>
					<div>没有注册{{moban.platform_name}}平台的可以推荐他注册一下{{moban.platform_name}}平台（对订单发展人来说平台完全免费）</div>
				</div>
				<div class="f3"><router-link to="/help/howtoaddDistributor" class="nav">点击了解如何添加分销商</router-link></div>
			</div>
			<div class="ff flex">
				<div class="f1"><img :src="howtoDistribut2"></div>
				<div class="f2">
					<div class="title3">2、发布商品</div>
					<div>1、发布要分销的商品 </div>
					<div>2、设置分销给那些合作伙伴（设置可见）以及设置该商品给予的佣金</div>
				</div>
				<div class="f3"><router-link to="/help/howtoRelease" class="nav">点击了解如何发布产品</router-link></div>
			</div>
			<div class="ff flex">
				<div class="f1"><img :src="howtoDistribut3"></div>
				<div class="f2">
					<div class="title3">3、分销商添加你分销的产品</div>
					<div>分销商通过产品销售中心添加产品到他的销售中心</div>
				</div>
				<div class="f3"><router-link to="/help/howtodoSee" class="nav">点击了解添加供应商商品</router-link></div>
			</div>
			<div class="ff flex">
				<div class="f1"><img :src="howtoDistribut4"></div>
				<div class="f2">
					<div class="title3">4、开始销售并将订单录入系统</div>
					<div>分销人通过自己的渠道，开始发展订单，并通过{{moban.platform_name}}系统提供的多种订单录入方式将订单录入到平台</div>
				</div>
				<div class="f3">
					<div><router-link to="/help/howtoGet" class="nav">点击了解如何抓单</router-link></div>
					<div><router-link to="/help/howtoImport" class="nav">点击了解如何导单</router-link></div>
					<div><router-link to="/help/howtoPost" class="nav">点击了解H5下单</router-link></div>
				</div>
			</div>
			<div class="ff flex">
				<div class="f1"><img :src="howtoDistribut5"></div>
				<div class="f2">
					<div class="title3">5、生产发货</div>
					<div>分销人发展的订单进入{{moban.platform_name}}系统后，根据发布人即生产方的规则，订单会自动进入到你的生产发货列表， 生产发货后，将生产数据导入系统，分销人就可以获得生产信息（分销人如果使用自动抓单系统，则会自动电商平台发货）</div>
				</div>
				<div class="f3"><router-link to="/help/howtoSend" class="nav">点击了解生产发货</router-link></div>
			</div>
			<div class="ff flex">
				<div class="f1"><img :src="howtoDistribut6"></div>
				<div class="f2">
					<div class="title3">6、结算佣金</div>
					<div>生产方将号码的激活数据导入到{{moban.platform_name}}平台，激活或激活且充值，{{moban.platform_name}}获得激活数据后， 可供您按照分销商导出结算订单数据。</div>
				</div>
				<div class="f3"><router-link to="/help/howtoStatistics" class="nav">点击了解佣金结算</router-link></div>
			</div>

			
		</div>
    </div>
</template>

<script>
    import axios from "axios";
    export default{
    	name: 'howtoDistribut',
    	data(){
    		return{
				howtoDistribut1:'./static/help/howtoDistribut1.png',
				howtoDistribut2:'./static/help/howtoDistribut2.png',
				howtoDistribut3:'./static/help/howtoDistribut3.png',
				howtoDistribut4:'./static/help/howtoDistribut4.png',
				howtoDistribut5:'./static/help/howtoDistribut5.png',
				howtoDistribut6:'./static/help/howtoDistribut6.png',
    		}
    	},
    	created() {
    		
    	},
        methods:{
           
        }
    }
</script>

<style lang="scss" scoped>
	.howtoDistribut{ font-size: 14px;
		.ff{ border-bottom: 1px #4d4d4d dashed; padding: 15px 0;
			div{line-height: 25px !important;}
			.f1{ flex-basis: 100px;  display: flex; align-items: center;
				img{ width: 70px !important;}
			}
			.f2{ flex-basis: 630px; padding: 15px 0; color: #4d4d4d;
				.title3{ margin-bottom: 10px;}
			}
			.f3{ flex-basis: 200px; text-align: right;  padding: 15px 0;
				a{ color: #77C9FF;}
			}
		}
		background: #F1F1F1;
		font-size: 14px;
		
		.exit {
		  margin-left: 20px;
		  cursor: pointer;
		  color: #77C9FF;
		}
		
		.flex {
		  display: flex;
		  flex-wrap: wrap;
		}
		
		.w1350 {
		  width: 1350px;
		  margin: 0 auto;
		}
		
		.top {
		  height: 30px;
		  line-height: 30px;
		}
		
		.logo {
		  background: #42628D;
		  padding: 20px 0;
		}
		
		.center {
		  padding: 30px 0;
		
		  .hleft {
		    background: #fff;
		    width: 330px;
		    box-sizing: border-box;
		    padding-top: 10px;
		    color: #77C9FF;
		    border-radius: 5px;
		    box-shadow: 0 0 5px #ccc;
		
		    .title {
		      padding-bottom: 20px;
		      padding-top: 20px;
		      font-size: 16px;
		      font-weight: bold;
		      padding-left: 35px;
		    }
		
		    .nav:hover {
		      background: #F1F1F1;
		    }
		
		    .nav {
		      line-height: 40px;
		      padding-left: 35px;
		      display: block;
		      color: #77C9FF;
		    }
		
		    .router-link-active {
		      background: #F1F1F1 !important;
		    }
		  }
		
		  .hright {
		    background: #fff;
		    justify-content: space-between;
		    width: 1000px;
		    box-sizing: border-box;
		    margin-left: 20px;
		    border-radius: 5px;
		    box-shadow: 0 0 5px #ccc;
		    padding-bottom: 30px;
		
		    img {
		      width: 100%;
		      display: block;
		      margin: 20px 0;
		    }
		
		    .title {
		      padding: 15px 30px;
		      font-size: 18px;
		      color: #4D4D4D;
		      border-bottom: 1px #DBDBDB solid;
		    }
		
		    .title2 {
		      color: #FF6161;
		      font-weight: bold;
		    }
		
		    .title4 {
		      color: #FF7777;
		      font-size: 14px
		    }
		
		    .bold {
		      font-weight: bold;
		    }
		
		    .content {
		      padding: 0 35px;
		      line-height: 50px;
		    }
		
		    .nei {
		      padding-left: 60px;
		    }
		
		    .blue {
		      color: #77C9FF;
		    }
		
		    .title3 {
		      font-size: 16px;
		    }
		
		    .big {
		      font-size: 18px;
		      padding: 20px 0;
		    }
		  }
		}
		
	}
</style>
